<template>
  <el-card class="box-card">
    <el-col :span="24" class="mb20">
      <el-col :span="24">
        <div class="table_content" style="margin-bottom: 1px">
          <el-row :gutter="4">
            <el-form
              :inline="true"
              ref="searchForm"
              label-position="left"
              class="demo-form-inline"
              label-width="100px"
            >
              <el-form-item
                label="模型名称"
                prop="name"
                class="clear_item-margin-bottom labdep"
              >
                <el-input
                  placeholder="请输入模型名称"
                  class="mr10 it350 wanner"
                />
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <div style="float: left; margin-bottom: 10px;">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus"
            @click="add()"
            >添加</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-delete-solid"
            @click="del()"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="search()"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="reset()"
            size="small"
            icon="el-icon-remove"
            >重置</el-button
          >
        </div>
        <el-table
          style="margin-top: 25px;border: 1px solid #ededed;"
          rel="multipleSelection"
          :data="contentList.list"
          table
          stripe
          header-row-class-name="table-header"
          row-class-name="table-row-border"
          cell-class-name="table-row-cell"
          header-cell-class-name="table-header-cell"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="cmTipsName"
            label="模型名称"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row)"
                type="text"
                size="small"
                style="font-size: 13px"
                >{{ scope.row.cmTipsName }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="cmTableName"
            label="模型表名"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                @click="ModelDetails(scope.row)"
                type="text"
                size="small"
                style="font-size: 13px"
                >{{ scope.row.cmTableName }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagess">
          <el-pagination
            style="float:right;display:block"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="contentList.currPage"
            :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="total,sizes,prev, pager, next,jumper"
            :total="contentList.totalRow"
            :loading="loading"
            :page-count="contentList.totalPage"
          ></el-pagination>
        </div>
      </el-col>
    </el-col>
    <el-dialog :visible.sync="showAddView" title="添加自定义模型:" width="40%">
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="deptViews"
            :rules="rules"
            :model="form"
            label-width="90px"
          >
            <el-form-item label="模型名称" prop="name">
              <el-input
                placeholder="请输入模型名称"
                v-model="form.cmTipsName"
              ></el-input>
            </el-form-item>
            <el-form-item label="模型表名" prop="no">
              <el-input
                placeholder="请输入表名（仅英文字符）"
                v-model="form.cmTableName"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <span style="float: right;">
                <el-button type="primary" size="small" @click="saveView()"
                  >保存</el-button
                >
              </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog :visible.sync="showEditView" title="更新自定义模型:" width="40%">
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="deptViews"
            :rules="rules"
            :model="UpdateForm"
            label-width="90px"
          >
            <el-form-item label="模型名称" prop="name">
              <el-input
                placeholder="请输入模型名称"
                v-model="UpdateForm.cmTipsName"
              ></el-input>
            </el-form-item>
            <el-form-item label="模型表名" prop="no">
              <el-input
                placeholder="请输入表名（仅英文字符）"
                v-model="UpdateForm.cmTableName"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item>
              <span style="float: right;">
                <el-button type="primary" size="small" @click="UpdateView()"
                  >更新</el-button
                >
              </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      readonly: true,
      loading: false,
      showAddView: false,
      showEditView: false,
      multipleSelection: [],
      rules: {
        cmTipsName: [
          { required: true, message: "请输入模型名称", trigger: "blur" }
        ],
        cmTableName: [
          {
            required: true,
            message: "请输入表名（仅英文字符）",
            trigger: "blur"
          }
        ]
      },
      form: {
        cmTableName: "",
        cmTipsName: ""
      },
      UpdateForm: {
        cmId: "",
        cmTableName: "",
        cmTipsName: ""
      },
      modelDto: {
        cmTableName: "",
        cmTipsName: "",
        pageNumber: 1,
        pageSize: 20
      }
    };
  },
  created() {
    this.getModelList();
  },
  computed: {
    ...mapGetters({
      contentList: "contentList",
      TableNameExist: "TableNameExist"
    })
  },
  methods: {
    handleSizeChange(val) {
      this.modelDto.pageSize = val;
      this.modelDto.pageNumber = 1;
      this.getModelList();
    },
    handleCurrentChange(val) {
      this.modelDto.pageNumber = val;
      this.getModelList(val);
    },
    //获取多选模型id
    handleSelectionChange(val) {
      console.log("获取多选", val);
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        if (this.multipleSelection.indexOf(val[i].cmId) === -1) {
          // this.multipleSelection.push(val[i].cmId);
          this.multipleSelection.push(val[i]);
        }
      }
      console.log("数组", this.multipleSelection);
    },
    //获取模型列表
    getModelList() {
      this.loading = true;
      this.$store
        .dispatch("listContentModelUsingPOSTS", { article: this.modelDto })
        .then(ret => {
          console.log("获取列表数据", ret);
          this.loading = false;
        });
    },
    //查询
    search() {
      this.getModelList();
    },
    //重置
    reset() {},
    //添加
    add() {
      this.showAddView = true;
    },
    //删除
    del() {
      console.log("传参", this.multipleSelection);
      this.$store
        .dispatch("deleteUsingPOSTS", { contentModels: this.multipleSelection })
        .then(ret => {
          console.log("删除成功", ret);
          this.getModelList();
        });
    },
    //保存自定义模型
    saveView() {
      var param = {
        cmTableName: this.form.cmTableName
      };
      this.$store
        .dispatch("checkcmTableNameExistUsingGETS", param)
        .then(ret => {
          if (ret.data == true) {
            this.$message({
              message: "模型名称/表名重复，请重新填写！"
            });
          } else {
            this.$store
              .dispatch("saveUsingPOSTS", { content: this.form })
              .then(ret => {
                this.showAddView = false;
                this.getModelList();
              });
          }
        });
    },
    //更新自定义模型
    UpdateView() {
      this.$store
        .dispatch("updateUsingPOSTS", { content: this.UpdateForm })
        .then(ret => {
          console.log("更新数据", ret);
          this.showEditView = false;
          this.getModelList();
        });
    },
    //编辑自定义模型
    edit(row) {
      this.showEditView = true;
      var param = {
        cmId: row.cmId
      };
      console.log("获取当前ID", param);
      this.$store.dispatch("getByIdUsingGETS", param).then(ret => {
        console.log("信息", ret);
        this.UpdateForm.cmTipsName = ret.data.cmTipsName;
        this.UpdateForm.cmTableName = ret.data.cmTableName;
        this.UpdateForm.cmId = ret.data.cmId;
      });
    },
    //表名详情
    ModelDetails(row) {
      console.log("点击触发", row);
      this.$router.push({
        name: "ModelDetails",
        query: {
          contentModelId: row.cmId
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.wanner {
  margin-left: -35px;
  width: 200px;
}
</style>
